<template>
  <div :class="className" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import tableTheme from "./macarons.json";
export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    },
    xIsLog: {
      // x轴是否对数
      type: Boolean,
      default: false
    },
    yIsLog: {
      // y轴是否对数
      type: Boolean,
      default: false
    },
    inverse: {
      // 是否翻转坐标轴
      type: Boolean,
      default: false
    },
    isSmooth: {
      // 是否平滑曲线
      type: Boolean,
      default: false
    },
    minorSplitLine: {
      // 是否显示次分隔线
      type: Boolean,
      default: false
    },
    xMin: {
      type: [String, Number],
      default: null // dataMin
    },
    xMax: {
      type: [String, Number],
      default: null // dataMax
    },
    yMin: {
      type: [String, Number],
      default: null // dataMin
    },
    yMax: {
      type: [String, Number],
      default: null // dataMax
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        if (val && val.seriesData && val.seriesData.length > 0) {
          this.setOptions(val);
        } else {
          this.setOptions({ xName: "", yName: "", seriesData: [], markLineData: [] });
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      echarts.registerTheme("tableTheme", tableTheme);
      this.chart = echarts.init(this.$el, "tableTheme");
      // this.chart = echarts.init(this.$el, 'macarons')
      // this.setOptions(this.chartData)
    },
    setOptions({ xName, yName, seriesData, markLineData }) {
      const options = {
        grid: {
          left: 15,
          right: 15,
          bottom: 15,
          top: 15,
          containLabel: true
        },
        xAxis: {
          name: xName,
          type: this.xIsLog ? "log" : "value",
          nameLocation: "middle",
          nameTextStyle: {
            lineHeight: 25
          },
          min: this.xMin,
          max: this.xMax,
          inverse: this.inverse, // 反转
          minorTick: {
            show: false
          },
          minorSplitLine: {
            show: this.minorSplitLine,
            lineStyle: {
              color: "#999",
              type: "solid"
            }
          }
        },
        yAxis: {
          name: yName,
          type: this.yIsLog ? "log" : "value",
          nameLocation: "middle",
          nameTextStyle: {
            lineHeight: 30
          },
          min: this.yMin,
          max: this.yMax,
          // logBase: 2,
          minorTick: {
            show: false
          },
          minorSplitLine: {
            show: this.minorSplitLine,
            lineStyle: {
              color: "#999",
              type: "solid"
            }
          }
        },
        series: [
          {
            data: seriesData,
            connectNulls: true,
            smooth: this.isSmooth,
            type: "line",
            markLine: {
              // symbol: ['circle', 'arrow'], // 定义两端的标记类型
              symbolSize: [1], // 定义标记大小
              label: {
                show: false
              },
              data: markLineData,
              silent: true
            }
          }
        ]
      };
      // console.log(JSON.stringify(options));
      this.chart.setOption(options);
    }
  }
};
</script>